<!DOCTYPE html>
<html>
<head>
    <title>Title</title>
</head>
<body onload="draw()">

<div id="container">
    <canvas id="mycanvas">Your Browser does not support Canvas, please upgrade</canvas>
</div>

<script>
    function draw() {
        const canvas = document.getElementById('mycanvas');
        const ctx = canvas.getContext('2d');
        // 这里给canvas元素设置宽和高
        canvas.setAttribute("width", 150);
        canvas.setAttribute("height", 150);
        // 画矩形
        ctx.fillRect(0, 0, 150, 150);
        // 平移绘制矩形的原点
        ctx.translate(75, 75);

        // 绘制圆形并创建裁剪圆形的路径，裁切路径创建之后所有出现在它里面的东西才会画出来
        ctx.beginPath();
        // 逆时针
        ctx.arc(0, 0, 60, 0, Math.PI*2, true);
        // 裁剪,覆盖在圆形上的矩形只能展现出裁剪的圆，其余的不会展示
        ctx.clip();

        // 画一个渐变的矩形，返回一个对象
        const lingrad = ctx.createLinearGradient(0, -75, 0, 75);
        lingrad.addColorStop(0, 'red');
        lingrad.addColorStop(1, 'green');

        ctx.fillStyle = lingrad;
        ctx.fillRect(-75, -75, 150, 150);

        // 开始画星星，当然也只有在裁切路径里面的星星才会绘制出来
        for (var j=1;j<50;j++){
            ctx.save();
            ctx.fillStyle = '#fff';
            ctx.translate(75-Math.floor(Math.random()*150),
                          75-Math.floor(Math.random()*150));
            drawStar(ctx,Math.floor(Math.random()*4)+2);
            ctx.restore();
        }
    }
    function drawStar(ctx, r) {
        ctx.save();
        ctx.beginPath();
        ctx.moveTo(r, 0);
        for (var i = 0; i < 9; i++) {
            ctx.rotate(Math.PI / 5);
            if (i % 2 === 0) {
                ctx.lineTo((r / 0.525731) * 0.200811, 0);
            } else {
                ctx.lineTo(r, 0);
            }
        }
        ctx.closePath();
        ctx.fill();
        ctx.restore();
    }
</script>
</body>
</html>